<template>
  <div class="p-rank common-bg">
    <div class="content">
      <div class="title">
        <div class="order">排名</div>
        <div class="content-detail">
          <div class="delegation">单位</div>
          <div class="name">姓名</div>
          <div class="horseName">马名</div>
          <div class="score">成绩</div>
        </div>
      </div>
      <div class="info">
        <div class="item" v-for="(item, index) in showList" :key="index">
          <div class="order" :style="item.Rank ? '' : 'opacity: 0'">{{ item.Rank }}</div>
          <div class="item-wrap">
            <div class="item-detail">
              <div class="delegation">{{ item.CountryName }}</div>
              <div class="name">{{ item.AtheleteName }}</div>
              <div :class="['horseName', item.HorseName.length > 15 ? 'horseNameAdapt' : '']">
                {{ item.HorseName }}
              </div>
              <div class="score">{{ item.Score }}</div>
            </div>
            <img src="@/assets/img/line-divide.png" alt="" height="5px" width="100%" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Rank',
  props: {
    rankList: {
      type: Array,
      default: () => [
        {
          Rank: 1,
          CountryName: '中国',
          AtheleteName: '王伟伟',
          HorseName: '王伟伟王伟伟',
          Score: 10.01,
        },
        {
          Rank: 2,
          CountryName: '中国',
          AtheleteName: '王伟伟',
          HorseName: '王伟伟王伟伟',
          Score: 10.01,
        },
        {
          Rank: 3,
          CountryName: '中国',
          AtheleteName: '王伟伟',
          HorseName: '王伟伟王伟伟',
          Score: 10.01,
        },
        {
          Rank: 4,
          CountryName: '中国',
          AtheleteName: '王伟伟',
          HorseName: '王伟伟王伟伟',
          Score: 10.01,
        },
        {
          Rank: 5,
          CountryName: '中国',
          AtheleteName: '王伟伟',
          HorseName: '王伟伟王伟伟',
          Score: 10.01,
        },
        {
          Rank: 6,
          CountryName: '中国',
          AtheleteName: '王伟伟',
          HorseName: '王伟伟王伟伟',
          Score: 10.01,
        },
        {
          Rank: 7,
          CountryName: '中国',
          AtheleteName: '王伟伟',
          HorseName: '王伟伟王伟伟',
          Score: 10.01,
        },
        {
          Rank: 8,
          CountryName: '中国',
          AtheleteName: '王伟伟',
          HorseName: '王伟伟王伟伟',
          Score: 10.01,
        },
        {
          Rank: 9,
          CountryName: '中国',
          AtheleteName: '王伟伟',
          HorseName: '王伟伟王伟伟',
          Score: 10.01,
        },
      ],
    },
    recTime: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      timer: null,
      lastFlipTime: 0,
      currentPage: 0,
      pageSize: 8,
      showList: [],
    }
  },
  beforeDestroy() {
    this.clearTimer()
  },
  mounted() {
    this.clearTimer()
    this.lastFlipTime = this.recTime || Date.now() // 初始化时取 props 值
    this.updateShowList()
    this.startTimer()
  },
  methods: {
    /** 获取当前页显示列表 */
    updateShowList() {
      const start = this.currentPage * this.pageSize
      const end = start + this.pageSize
      this.showList = this.rankList.slice(start, end)
    },

    /** 开启定时检测 */
    startTimer() {
      this.timer = setInterval(() => {
        const now = Date.now()
        if (now - this.lastFlipTime >= 8000) {
          this.nextPage()
          this.lastFlipTime = now
          console.log('翻页')
        }
      }, 1000) // 每秒检测一次即可
    },

    /** 翻页 */
    nextPage() {
      const totalPages = Math.ceil(this.rankList.length / this.pageSize)
      this.currentPage = (this.currentPage + 1) % totalPages
      this.updateShowList()
    },

    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
  },
}
</script>

<style lang="less" scoped>
@import '@/assets/less/rank.less';
@import '@/assets/less/common.less';
</style>
